<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="../css/index.css" />
		<script src="../js/vue.js"></script>
		<script src="../js/elementui.js"></script>
	</head>
	<body>
		<div id="app">
			<div>
				<template>
					<div class="block">
						<span class="demonstration">默认</span>
						<el-date-picker v-model="value1" type="datetime" placeholder="选择日期时间">
						</el-date-picker>
					</div>
					<div class="block">
						<span class="demonstration">带快捷选项</span>
						<el-date-picker v-model="value2" type="datetime" placeholder="选择日期时间" align="right"
							:picker-options="pickerOptions">
						</el-date-picker>
					</div>
					<div class="block">
						<span class="demonstration">设置默认时间</span>
						<el-date-picker v-model="value3" type="datetime" placeholder="选择日期时间" default-time="12:00:00">
						</el-date-picker>
					</div>
				</template>
			</div>
			<hr />
			
			<div>
				<template>
					<div class="block">
						<span class="demonstration">默认</span>
						<el-date-picker v-model="value4" type="datetimerange" range-separator="至"
							start-placeholder="开始日期" end-placeholder="结束日期">
						</el-date-picker>
					</div>
					<div class="block">
						<span class="demonstration">带快捷选项</span>
						<el-date-picker v-model="value5" type="datetimerange" :picker-options="pickerOptions1"
							range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right">
						</el-date-picker>
					</div>
				</template>
			</div>
			<hr />
			
			<div>
				<template>
				  <div class="block">
				    <span class="demonstration">起始日期时刻为 12:00:00</span>
				    <el-date-picker
				      v-model="value6"
				      type="datetimerange"
				      start-placeholder="开始日期"
				      end-placeholder="结束日期"
				      :default-time="['12:00:00']">
				    </el-date-picker>
				  </div>
				  <div class="block">
				    <span class="demonstration">起始日期时刻为 12:00:00，结束日期时刻为 08:00:00</span>
				    <el-date-picker
				      v-model="value7"
				      type="datetimerange"
				      align="right"
				      start-placeholder="开始日期"
				      end-placeholder="结束日期"
				      :default-time="['12:00:00', '08:00:00']">
				    </el-date-picker>
				  </div>
				</template>
			</div>
		</div>
	</body>
	<script>
		new Vue({
			el: '#app',
			data: {
				pickerOptions: {
					shortcuts: [{
						text: '今天',
						onClick(picker) {
							picker.$emit('pick', new Date());
						}
					}, {
						text: '昨天',
						onClick(picker) {
							const date = new Date();
							date.setTime(date.getTime() - 3600 * 1000 * 24);
							picker.$emit('pick', date);
						}
					}, {
						text: '一周前',
						onClick(picker) {
							const date = new Date();
							date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
							picker.$emit('pick', date);
						}
					}]
				},
				pickerOptions1: {
					shortcuts: [{
						text: '最近一周',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
							picker.$emit('pick', [start, end]);
						}
					}, {
						text: '最近一个月',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
							picker.$emit('pick', [start, end]);
						}
					}, {
						text: '最近三个月',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
							picker.$emit('pick', [start, end]);
						}
					}]
				},
				value4: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
				value5: '',
				value1: '',
				value2: '',
				value3: '',
				value6: '',
				value7: ''
			},
		})
	</script>
</html>